<template>
  <a-modal
    v-model:visible="visible"
    title="库存配额管理"
    @ok="execMan"
    :closable="false"
    @cancel="closeMan"
  >
    <template>
      <a-button key="back">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="execMan"
        >提交</a-button
      >
    </template>
    <a-form
      :model="manObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
      :rules="rules"
      ref="ManRef"
    >
      <a-form-item label="出口货物编号">
        <a-input v-model:value="manObj.g_id" disabled />
      </a-form-item>
      <a-form-item label="出口仓库">
        <a-input v-model:value="manObj.fa_name" disabled />
      </a-form-item>
      <a-form-item label="仓库库存量">
        <a-input v-model:value="manObj.fa_num" disabled />
      </a-form-item>
      <a-form-item label="目标仓库" name="ch_name">
        <a-select
          v-model:value="manObj.ch_name"
          show-search
          style="width: 200px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option v-for="branch in branchMap" :key="branch.br_name">{{
            branch.br_name
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="转移数量" name="ch_num">
        <a-input v-model:value="manObj.ch_num" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { reactive, ref } from "vue";
import { put, tip, get } from "@/common";
export default {
  setup(props, { emit }) {
    let checkChNum = async (rule, value) => {
      if (!value) {
        return Promise.reject("请输入转移数量");
      }

      if (!Number.isInteger(parseInt(value))) {
        return Promise.reject("请输入正数");
      } else {
        if (value > parseInt(manObj.fa_num)) {
          return Promise.reject("转移数量不能超过库存量");
        } else if (value <= 0) {
          return Promise.reject("转移数量应大于0");
        } else {
          return Promise.resolve();
        }
      }
    };
    const ManRef = ref();
    const rules = {
      ch_name: [
        {
          required: true,
          message: "请输入目标仓库名称",
          trigger: "blur",
        },
      ],
      ch_num: [
        {
          validator: checkChNum,
          trigger: "blur",
        },
      ],
    };
    const handleBlur = () => {};
    const closeMan = () => {
      ManRef.value.resetFields();
      emit("flash");
    };

    const handleFocus = () => {
      console.log("focus");
    };

    const filterOption = (input, option) => {
      return option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    const branchMap = ref({});
    const manObj = reactive({
      g_id: "",
      fa_name: "",
      fa_num: "",
      ch_name: "",
      ch_num: "",
    });
    const visible = ref(false);
    const openMan = (record) => {
      get("/stock/manage/branch").then((res) => {
        branchMap.value = res.data;
      });
      manObj.fa_name = record.g_branch;
      manObj.fa_num = parseInt(record.g_num);
      manObj.g_id = record.g_id;
      visible.value = true;
    };
    const execMan = () => {
      ManRef.value
        .validate()
        .then(() => {
          put("/stock/manage", manObj).then((res) => {
            ManRef.value.resetFields();
            visible.value = false;
            tip.success("配额成功");
            emit("flash");
          });
        })
        .catch((error) => {
          tip.error("输入信息缺失或不正确！");
        });
    };
    return {
      visible,
      openMan,
      manObj,
      execMan,
      branchMap,
      handleBlur,
      handleFocus,
      filterOption,
      closeMan,
      ManRef,
      rules,
      checkChNum,
    };
  },
};
</script>
